<template>
  <el-form :model="lists" :rules="rules" label-width="120px" ref="studAdd">
    <el-form-item label="学员姓名" prop="studyName">
      <el-input v-model="lists.studyName" />
    </el-form-item>
    <el-form-item label="头像" prop="icon">
      <el-upload action="/api/upload" name="file" accept="image/*" :on-success="uploadSuccess"
        :before-upload="beforeUpload">
        <el-button type="primary">点击上传</el-button>
        <template #tip>
          <div class="el-upload__tip">
            只能上传jpg/png/gif,且体积不能超出1m
          </div>
        </template>
      </el-upload>
    </el-form-item>
    <el-form-item label="家长姓名" prop="parentName">
      <el-input v-model="lists.parentName" />
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="lists.phone" />
    </el-form-item>
    <el-form-item label="学员性别" prop="sex">
      <el-select v-model="lists.sex" placeholder="请选择">
        <el-option label="男" value="1" />
        <el-option label="女" value="0" />
        <el-option label="未知" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="入学时间" prop="date">
      <el-col :span="11">
        <el-date-picker v-model="lists.date" type="date" placeholder="选择日期" style="width: 100%" />
      </el-col>
    </el-form-item>
    <el-form-item label="身份证号" prop="identityCard">
      <el-input v-model="lists.identityCard" />
    </el-form-item>
    <el-form-item label="备注" prop="desc">
      <el-input v-model="lists.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button @click="restForm">重置</el-button>
    </el-form-item>
  </el-form>

</template>

<script>
import { studAdd } from '@/api/nowPage'

export default {
  name: 'StudAdd',
  data() {
    return {
      lists: {
        studyName: '',
        parentName: '',
        phone: '',
        sex: '',
        identityCard: '',
        desc: '',
        date: '',
        icon: ''
      },
      rules: {
        studyName: [
          { required: true, message: '必填' }
        ],
        parentName: [
          { required: true, message: '必填' }
        ],
        phone: [
          {
            required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号'
          }
        ]
      }

    }
  },
  methods: {
    beforeUpload(file) {
      // 限制上传文件的体积  byte
      if (file.size > (1024 * 1024)) {
        alert('体积超出1m')
        return false
      } else {
        return true
      }
    },
    uploadSuccess(res) {
      if (res.code === 200) {
        this.$message({
          type: 'success',
          message: '上传成功'
        })
        this.study.icon = res.data.url
      }
    },
    restForm() {
      this.$refs.studAdd.resetFields()
    },
    onSubmit() {
      this.$refs.studAdd.validate(valid => {
        if (valid) {
          // console.log(this.lists)
          studAdd(this.lists).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: res.data.msg,
                onClose: () => {
                  this.$router.go(0)
                }
              })
            } else {
              this.$message({
                type: 'error',
                message: res.data.msg
              })
            }
          })
        } else {
          this.$message({
            type: 'error',
            message: '填写不标准'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
